<template>
	<div>
		<newDialog :title="title" :dialogVisible="dialogVisible" width="50%" :ensureLoading='ensureLoading' @closeDialog='closeDialog'
		 @submitDialog='submitDialog' :isShowBtn='isShowBtn' class='elList'>
			<div slot='content'>
				<el-form :model="form" ref='form' size="mini" :rules="rules" v-loading='isLoading' label-width="120px">
					<el-row>
						<el-col :span="9">
							<el-form-item label="资源名称:" prop="query">
								<el-input :disabled="detailDisable" v-model="form.query" clearable placeholder="请输入资源名称"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="9">
							<el-form-item label="资源类型:">
								<el-select :disabled="detailDisable" @change='changeValue1' v-model="form.resource" placeholder="请选择资源类型" size="mini"
								 filterable clearable>
									<el-option v-for="item in resourceArr" :label="item.label" :value="item.value" :key='item.value'></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="9">
							<el-form-item label="适用終端:">
								<el-select :disabled="detailDisable" @change='changeValue' v-model="form.terminal" placeholder="请选择适用終端" size="mini"
								 filterable clearable>
									<el-option v-for="item in terminalArr" :label="item.label" :value="item.value" :key='item.value'></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="9">
							<el-form-item label="播放模式:">
								<el-select :disabled="detailDisable || playModeDis" v-model="form.playMode" placeholder="请选择播放模式" size="mini"
								 filterable clearable>
									<el-option v-for="item in playModeArr" :disabled="item.disabled" :label="item.label" :value="item.value" :key='item.value'></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="19">
							<el-form-item label="文件名称:">
								<!-- 	<el-input :disabled="detailDisable" v-model="form.textName" clearable placeholder="请输入文件名称"></el-input> -->
								<el-upload v-if="form.resource == '0'" :disabled='detailDisable || playModeDis' style="margin-left: 5px;margin-top: -5px;"
								 :on-preview="upLoadPreview" action="" accept=".jpg,.jpeg,.png" :file-list="fileList" :on-change="upLoadChange"
								 :on-remove="upLoadRemove" :auto-upload="false" list-type="picture" name="upfile">
									<el-button size="mini" type="primary" :disabled='detailDisable || playModeDis'>浏览</el-button>
								</el-upload>
								<el-upload v-else :disabled='detailDisable || playModeDis' style="margin-left: 5px;margin-top: -5px;" action="" :file-list="fileList"
								 :on-change="upLoadChange1" :on-remove="upLoadRemove" :auto-upload="false"  name="upfile">
									<el-button size="mini" type="primary" :disabled='detailDisable || playModeDis'>浏览</el-button>
								</el-upload>
							</el-form-item>
						</el-col>
						<!-- 	<el-col :span="10">
							
						</el-col> -->
					</el-row>
				</el-form>
			</div>
		</newDialog>
		<el-dialog custom-class="imgDialogShow" :visible.sync="imgDialogShow" :append-to-body='true' :before-close='closeImg'>
			<img :src="dialogImgUrl" alt="">
		</el-dialog>
	</div>
</template>

<script>
	import {
		loadFn,
		axiosPost,
		axiosGet,
		axiosChange,
		axiosDelete,
		axiosPut,
		moment
	} from "@/common.js";
	import newDialog from '@/components/publicComponents/dialogComp.vue'
	import {
		query
	} from './rules.js'
	export default {
		components: {
			newDialog
		},
		props: {
			dialogVisible: {
				type: Boolean,
				default () {
					return false
				}
			},
			title: {
				type: String,
				default () {
					return '提示'
				}
			},
			rowId: {
				type: Number,
				default () {
					return 0
				}
			}
		},
		mounted() {
			if (this.rowId) {
				this.getComList()
			}
			if(this.title == '资源管理详情'){
				this.isShowBtn = false
			}
		},
		data() {
			return {
				isShowBtn:true,
				ensureLoading: false,
				fileList: [],
				isLoading: false,
				resourceArr: [{
					label: '图片',
					value: '0'
				}, {
					label: '视频',
					value: '1'
				}],
				terminalArr: [{
					label: '单屏',
					value: '0'
				}, {
					label: '双屏',
					value: '1'
				}],
				form: {
					query: '',
					resource: '',
					playMode: '',
					terminal: '',
					textName: ''
				},
				rules: {
					query
				},
				imgDialogShow: false,
				dialogImgUrl: ''
			}
		},
		computed: {
			playModeDis() {
				if (this.form.resource && this.form.terminal) {
					return false
				} else {
					return true
				}
			},
			detailDisable() {
				if (this.title == '资源管理详情') {
					return true
				} else {
					return false
				}
			},
			playModeArr() {
				if (this.form.resource == '0' && this.form.terminal == '0') {
					return [{
						label: '纯视频',
						value: '0',
						disabled: true
					}, {
						label: '1/2视频',
						value: '1',
						disabled: true
					}, {
						label: '1/3视频',
						value: '2',
						disabled: true
					}, {
						label: '纯图片',
						value: '3',
						disabled: false
					}, {
						label: '1/2图片',
						value: '4',
						disabled: false
					}, {
						label: '1/3图片',
						value: '5',
						disabled: true
					}]
				} else if (this.form.resource == '0' && this.form.terminal == '1') {
					return [{
						label: '纯视频',
						value: '0',
						disabled: true
					}, {
						label: '1/2视频',
						value: '1',
						disabled: true
					}, {
						label: '1/3视频',
						value: '2',
						disabled: true
					}, {
						label: '纯图片',
						value: '3',
						disabled: false
					}, {
						label: '1/2图片',
						value: '4',
						disabled: false
					}, {
						label: '1/3图片',
						value: '5',
						disabled: false
					}]
				} else if (this.form.resource == '1' && this.form.terminal == '0') {
					return [{
						label: '纯视频',
						value: '0',
						disabled: false
					}, {
						label: '1/2视频',
						value: '1',
						disabled: true
					}, {
						label: '1/3视频',
						value: '2',
						disabled: false
					}, {
						label: '纯图片',
						value: '3',
						disabled: true
					}, {
						label: '1/2图片',
						value: '4',
						disabled: true
					}, {
						label: '1/3图片',
						value: '5',
						disabled: true
					}]
				} else if (this.form.resource == '1' && this.form.terminal == '1') {
					return [{
						label: '纯视频',
						value: '0',
						disabled: false
					}, {
						label: '1/2视频',
						value: '1',
						disabled: false
					}, {
						label: '1/3视频',
						value: '2',
						disabled: false
					}, {
						label: '纯图片',
						value: '3',
						disabled: true
					}, {
						label: '1/2图片',
						value: '4',
						disabled: true
					}, {
						label: '1/3图片',
						value: '5',
						disabled: true
					}]
				}
			}
		},
		methods: {
			changeValue() {
				this.form.playMode = ''
			},
			changeValue1(){
				this.fileList = []
				this.form.playMode = ''
			},
			getComList() {
				this.isLoading = true
				let url = '/res/queue/material/' + this.rowId + '/'
				axiosGet(url, {}, (res) => {
					this.isLoading = false
					if (res.code == 0) {
						this.form.query = res.detail.name
						this.form.resource = res.detail.rtype
						this.form.playMode = res.detail.play_mode
						this.form.terminal = res.detail.ttype
						// this.form.textName =  
						this.fileList = [{
							name: '',
							url: res.detail.file
						}]
					} else {
						this.$message.error(res.detail.result)
					}
				})
			},
			closeImg() {
				this.imgDialogShow = false
			},
			upLoadPreview(file) {
				this.imgDialogShow = true
				this.dialogImgUrl = file.url
			},
			upLoadChange(file, fileList) {
				const isLt2M = file.size / 1024 < 800;
				if (file.name.split(".")[1] != "jpg" && file.name.split(".")[1] != "png" && file.name.split(".")[1] != "jpeg") {
					this.$message.error('只能上传JPG/PNG/JPEG格式图片');
					this.fileList = fileList.slice(0, -1);
					return
				}
				if (!isLt2M) {
					this.$message.error('上传图片大小不能超过 800kb!,请重新上传');
					this.fileList = fileList.slice(0, -1);
					return
				}
				this.fileList = fileList.slice(-1);
			},
			upLoadChange1(file, fileList) {
				console.log(file)
				const isLt2M = file.size/1024 > 1024;
				if (file.name.split(".")[1] != "mp4") {
					this.$message.error('只能上传mp4');
					this.fileList = fileList.slice(0, -1);
					return
				}
				if (isLt2M) {
					this.$message.error('上传视频大小不能超过 1024M,请重新上传');
					this.fileList = fileList.slice(0, -1);
					return
				}
				this.fileList = fileList.slice(-1);
			},
			upLoadRemove(file, fileList) {
				this.fileList = fileList;
			},
			uploadImage(imgList, num) {
				if (imgList.leng != 0) {
					const formData = new FormData();
					formData.append("upfile", imgList[num].raw)
					return this.$axios({
						url: "/utils/upload/",
						method: "post",
						data: formData
					})
				} else {
					console.log('没有照片')
				}
			},
			closeDialog() {
				this.$emit('closeMask')
			},
			submitDialog() {
				this.$refs['form'].validate(async (valid) => {
					if (valid) {
						let imgArr = []
						let permises = []
						for (let i = 0; i < this.fileList.length; i++) {
							if (this.fileList[i].raw) {
								permises.push(this.uploadImage(this.fileList, i))
							} else {
								imgArr.push(this.fileList[i].url)
							}
						}
						const res = await Promise.all(permises)
						for (let i = 0; i < res.length; i++) {
							res[i].code == 0 && imgArr.push(res[i].detail)
						}
						console.log(imgArr)
						this.ensureLoading = true
						let url = ''
						let method = ''
						let data = {
							name: this.form.query, // 名称
							rtype: this.form.resource, // "0"图片， “1”视频， 字符串
							play_mode: this.form.playMode, // 播放模式 "0":纯视频, "1":1/2视频, "2": 1/3视频, "3": 纯图片, "4": 1/2图片, "5": 1/3图片   字符串
							ttype: this.form.terminal, // 适用终端 , "0:单屏", "1: 双屏"
							file: imgArr.join(',')
						}
						if (!this.rowId) {
							url = '/res/resource/'
							method = 'post'
						} else {
							url = '/res/resource/' + this.rowId + '/'
							method = 'put'
						}
						axiosChange(url, method, data, (res) => {
							this.ensureLoading = false
							if (res.code == 0) {
								this.$message.success('操作成功')
								this.$emit('submitDialog')
							} else {
								this.$message.error(res.detail.result)
							}
						})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			}
		}
	}
</script>

<style>
</style>
